<template>
	<view>
		<top-blank></top-blank>
		<top-common @backPage="backPage" titleContent="检查中"></top-common>
		<view class="fault-type">
			<view class="fault-type-title">故障类型</view>
			<view class="fault-type-dec">{{orderCheckListData.faultTypeName}}</view>
		</view>


		<view class="fault-details">
			<view class="fault-details-title">故障情况描述</view>
			<view class="fault-details-content">{{orderCheckListData.description}}</view>
		</view>


		<view class="describe">
			<view class="describeTitle">详细故障描述</view>
			<view class="uni-textarea">
				<textarea v-model="detailedDescription" placeholder-style="color:#ffffff"
					placeholder="如若检查情况与故障情况描述有出入,可在此输入信息" />
			</view>
		</view>


		<view class="bottomBtn">
			<bottom-submit @submitMes="submitMes" title="检查完成" class="bottom-submit-style"></bottom-submit>
		</view>
	</view>
</template>

<script>
	import MyStore from '@/store/index.js'
	import config from "@/config"; // 导入配置文件
	// 基本路径
	const baseURL = config.baseURL;

	export default {
		data() {
			return {
				orderCheckListData: {}, //检查中数据列表
				detailedDescription: '',
			};
		},
		methods: {
			backPage() {
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			},
			submitMes() {
				console.log("点击了检查完成");
				let orderId = MyStore.getters.getClickOrderStailsId;
				console.log("检查中页面打印getClickOrderStailsId===>", orderId);
				let that = this;
				const token = uni.getStorageSync('token');
				uni.request({
					url: `${baseURL}/order/next`,
					method: 'POST',
					data: {
						"id": orderId,
						"report": {
							"description": that.detailedDescription
						}
					},
					header: {
						"token": token
					},
					success(res) {
						console.log("打印检查完成后返回的数据：", res);
						console.log("检查工单完成");
						uni.redirectTo({
							url: '/pages/maintenance-worker/maintenance-worker'
						})
					},
					fail(err) {
						close("检查中“完成检查请求”返回响应:", err)
					}
				})
			}
		},
		onLoad() {
			let orderId = MyStore.getters.getClickOrderStailsId;
			console.log("检查中页面打印getClickOrderStailsId===>", orderId);

			let that = this;
			const token = uni.getStorageSync('token');
			if (orderId != -100) {
				let that = this;
				//查询指定工单的工单数据
				uni.request({
					url: `${baseURL}/order/id/${orderId}`,
					method: "GET",
					header: {
						"token": token
					},
					success(res) {
						console.log("维修员指定检查工单返回的详细数据：", res);
						that.orderCheckListData = res.data.data;
					}
				})
			} else {
				console.log("未选择查看任何工单的详情");
				uni.redirectTo({
					url: '/pages/maintenance-worker/maintenance-worker'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #333333;
	}

	.fault-type {
		background-color: #4f4f4f;
		height: 90rpx;
		color: #ffb612;
		margin: 20rpx 10rpx;
		display: flex;
		padding: 10rpx;
		justify-content: space-between;
		align-items: center;
		border-left: 4rpx solid #ffb612;
		border-right: 4rpx solid #ffb612;
		border-radius: 10rpx;

		.fault-type-title {
			font-weight: 600;
		}
	}

	.fault-details {
		background-color: #4f4f4f;
		min-height: 90rpx;
		margin: 30rpx 10rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx 10rpx 30rpx;
		border-left: 4rpx solid #ffb612;
		border-right: 4rpx solid #ffb612;
		border-radius: 10rpx;

		.fault-details-title {
			font-weight: 600;
			color: #ffb612;
		}

		.fault-details-content {
			margin: 20rpx 0 10rpx 20rpx;
			color: white;
			width: 90vw;
			word-wrap: break-word;
			/* 当单词太长时，强制换行 */
			overflow-wrap: break-word;
			/* 当单词太长时，强制换行 */
		}
	}

	.describe {
		width: 95vw;
		height: 35vh;
		margin: 20rpx auto 0;
		border-radius: 30rpx;
		border-left: 4rpx solid #ffb612;
		border-right: 4rpx solid #ffb612;
		background-color: #4e4e4e;

		.describeTitle {
			font-weight: 600;
			color: #ffb612;
			margin-left: 50rpx;
			font-size: 40rpx;
		}

		textarea {
			height: 25vh;
			width: 80vw;
			border: 1rpx solid #bbbbbb;
			margin: 20rpx auto;
			padding: 10rpx;
			color: white;
		}
	}

	.bottomBtn {
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
	}
</style>
